<template>
	<view>
		<view class="swiper">
			<swiper indicator-dots="true" indicator-color="#ffffff" indicator-active-color="#45AA8C" :autoplay="autoplay" interval="2000" duration="500" style="height: 400upx;">
				<swiper-item v-for="(image,key) in detail.images" :key="key">
					<image :src="image" mode="aspectFill" class="swiper-image"></image>
				</swiper-item>
			</swiper>
			<view class="info">
				<view class="info-row">
					<text class="info-name">
						<text>{{detail.name}}</text>
						<text class="info-weight">
							{{detail.time}}min
						</text>
					</text>
					<text class="info-price">
						￥{{detail.price}}
					</text>
				</view>
				<view class="info-row">
					<view class="info-count">
						{{detail.volumn}}人已购买
					</view>
					<view class="info-store-price">
						门店价：￥{{detail.shop_price}}
					</view>
					
				</view>
			</view>
			<view class="discount" v-if="detail.discount">
				<view class="discount-title">
					{{detail.discount.name}}
				</view>
				<view class="discount-content">
					{{detail.discount.introduce}}
				</view>
				<view style="flex: 1;"></view>
				<uni-icon type="arrowright" color="#ABABAB"></uni-icon>
			</view>
			<view class="store" @click="showChoosePage">
				<view class="store-title">
					推荐门店
				</view>
				<view class="store-content">
					{{nearby.name}}
				</view>
				<uni-icon type="arrowright" color="#ABABAB"></uni-icon>
			</view>
			<view class="comment">
				<view class="comment-header">
					<view class="comment-title">
						用户评价
					</view>
					<view class="comment-count" @click="showAllComments">
						查看全部（{{detail.comment_count}}条）
					</view>
					<uni-icon type="arrowright" color="#ABABAB"></uni-icon>
				</view>
				<view class="comment-list">
					<view class="comment-item" v-for="(comment,key) in detail.comments" :key="key">
						<view class="comment-time">
							{{comment.addtime}}
						</view>
						<view class="comment-user">
							<image :src="comment.avatar" mode="" class="comment-avatar"></image>
							<view class="comment-userinfo">
								<view class="">
									<text>{{comment.nickname}}</text>
								</view>
								<view class="comment-phone">
									{{comment.phone}}
								</view>
							</view>
						</view>
						<view class="comment-scores">
							<view class="comment-score">
								门店环境：
								<view class="comment-stars" style="margin: 0;">
									<block v-for="i in 5" :key="i">
										<image src="../../../static/star.png" mode="" style="width: 24upx;height: 24upx;" v-if="i<=comment.environment_score-1"></image>
										<image src="../../../static/star-line.png" mode="" style="width: 24upx;height: 24upx;" v-else></image>
									</block>
								</view>
								/
								<view class="" style="margin-left: 10upx;width: 320upx;text-overflow: ellipsis;overflow: hidden;">
									{{comment.store_name}}
								</view>
							</view>
							<view class="comment-score">
								服务评分：
								<view class="comment-stars" style="margin: 0;">
									<block v-for="i in 5" :key="i">
										<image src="../../../static/star.png" mode="" style="width: 24upx;height: 24upx;" v-if="i<=comment.service_score-1"></image>
										<image src="../../../static/star-line.png" mode="" style="width: 24upx;height: 24upx;" v-else></image>
									</block>
								</view>
								/
								<view class="" style="margin-left: 10upx;">
									{{comment.staff_name}}
								</view>
							</view>
						</view>
						<view class="comment-content">
							{{comment.content}}
						</view>
						<view class="comment-images">
							<image :src="image" mode="" class="comment-image" v-for="(image,index) in comment.images" :key="index"></image>
						</view>
						
					</view>
				</view>
			</view>
			<view class="detail">
				<rich-text :nodes="detail.detail"></rich-text>
			</view>
			
		</view>
		<view class="bottom">
			<button class="bottom-btn share-btn" @click="contract">
				<image class="bottom-icon" src="../../../static/store/contact.png"></image>
				<view class="bottom-text">
					客服
				</view>
			</button>
			<button class="bottom-btn share-btn" open-type="share">
				<image class="bottom-icon" src="../../../static/store/share.png"></image>
				<view class="bottom-text">
					分享
				</view>
			</button>
			<button class="buy-btn" @click="booking()">
				立即预约
			</button>
		</view>
	</view>
</template>

<script>
	import uniIcon from '../../../components/uni-icon.vue'
	export default {
		data() {
			var isLogin=uni.getStorageSync("token")!=null&&uni.getStorageSync("token")!="";
			return {
				id:0,
				shop_id:0,
				detail:{
					name:"",
					price:"",
					time:"",
					shop_price:"",
					volumn:"",
					comment_count:0
				},
				cart_number:0,
				isLogin:isLogin,
				nearby:{
					id:0,
					name:"获取中",
					address:"获取中",
					phone:"",
					longitude:"",
					latitude:"",
				},
			};
		},
		onShareAppMessage:function(res){
			
		},
		onLoad:function(e){
			var title="";
			this.id=e.id;
			this.shop_id=e.shop_id;
			this.getLocation();
		},
		onShow:function(){
			var shop=uni.getStorageSync("selectedShop");
			console.log(shop);
			uni.removeStorageSync("selectedShop");
			if(shop){
				this.shop_id=shop.id;
				this.nearby=shop;
				this.getDetail();
			}
		},
		methods:{
			showAllComments:function(){
				if(this.detail.comment_count==0){
					return;
				}
				let shop_id = this.shop_id?this.shop_id:this.nearby.id;
				uni.navigateTo({
					url:"../../service/comments/comments?id="+this.id+"&shop_id="+shop_id,
				})
			},
			showChoosePage:function(){
				this.confirmShow=false;
				uni.navigateTo({
					url:"/pages/shop/choose/choose"
				})
			},
			getLocation:function(){
				uni.showLoading({
					title:"正在获取推荐门店"
				});
				var that=this;
				uni.getLocation({
					type:"gcj02",
					complete:function(e){
						uni.hideLoading();
						that.getRecommendShop(e);
					},
					fail:function(){
						uni.hideLoading();
						uni.showModal({
							title:"位置信息获取失败",
							content:"请手动选择位置",
							confirmText:"手动选择",
							success:function(e){
								if(e.confirm){
									uni.chooseLocation({
										success:function(e){
											that.getRecommendShop(e);
										}
									})
								}
							}
						})
					}
				})
			},
			getRecommendShop:function(location){
				console.log("获取门店");
				var that=this;
				that.ajax("/shop/nearby/",{
					"latitude":location.latitude,
					"longitude":location.longitude,
					"count":1,
					"store_id":this.shop_id,
				},function(res){
					if(res.data.data.length>0){
						that.nearby=res.data.data[0];
						that.getDetail();
					}else{
						that.nearby={
							name:"附近没有门店",
							address:"请点击右侧电话按钮联系客服"
						}
					}
				});
			},
			
			getDetail:function(){
				uni.showLoading({
					title:"加载中"
				});
				var that=this;
				that.ajax("/service/detail/",{
					id:this.id,
					store_id:this.shop_id?this.shop_id:this.nearby.id,
				},function(res){
					that.detail=res.data.data;
				});
			},
			contract:function(){
				uni.makePhoneCall({
					phoneNumber:this.nearby.phone
				})
			},
			booking:function(){
				if(this.detail.price=="未设置"){
					uni.showToast({
						title:"该门店暂无法提供该服务",
						icon:"none",
					})
					return;
				}
				if(this.nearby.id>0){
					uni.navigateTo({
						url:"/pages/staff/choose/choose?store_id="+this.nearby.id+"&service_id="+this.detail.id,
					})
				}else{
					uni.showToast({
						title:"附近无门店",
						image:"../../../static/error.png"
					});
				}
				
			},
		},
		components: {
			uniIcon
		},
		
	}
</script>

<style>
	@import "../../../common/icon.css";
	
	.swiper{
		height: 400upx;
	}
	.swiper {
		padding:28upx;
		height: 400upx;
		border-radius: 24upx;
	}
	
	.swiper-image {
		width: 100%;
		height: 400upx;
		border-radius: 12upx;
	}
	.info {
		padding: 28upx;
	}
	
	.info-title {
		font-size: 32upx;
		color: #4B4B4B;
	}
	
	.info-detail {
		display: flex;
		flex-direction: row;
		align-content: space-around;
		align-items: center;
	}
	
	.info-price {
		color: #FF7465;
		font-size: 36upx;
	}
	.info-name{
		color: #4B4B4B;
		font-size: 32upx;
	}
	.info-weight{
		font-size: 20upx;
		line-height: 30upx;
		background: #45AA8C;
		border-radius: 6upx;
		display: inline-block;
		margin-left: 10upx;
		padding: 0 10upx;
		color: #ffffff;
	}
	.info-row{
		display: flex;
		flex-direction: row;
		color: #b4b4b4;
		font-size: 28upx;
		align-content: space-around;
		align-items: center;
		justify-content: space-between;
	}
	.discount {
		background: #FFFFFF;
		margin: 30upx 20upx 0 20upx;
		display: flex;
		flex-direction: row;
		padding: 32upx 24upx;
		align-content: center;
		align-items: center;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
		border-radius:12upx;
	}
	
	.discount-title {
		color: #4B4B4B;
		font-weight: 800;
		font-size: 28upx;
	
	}
	
	.discount-content {
		display: inline-block;
		margin-left: 18upx;
		background: #45AA8C;
		font-size: 20upx;
		padding: 5upx 15upx;
		border-radius: 8upx;
		color: #FFFFFF;
	}
	
	
	.store {
		background: #FFFFFF;
		margin: 30upx 20upx 0 20upx;
		display: flex;
		flex-direction: row;
		align-content: center;
		align-items: center;
		padding: 32upx 24upx;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
		border-radius:12upx;
	}
	
	.store-title {
		color: #4B4B4B;
		font-size: 30upx;
		flex: 1;
	}
	
	.store-content {
		display: inline-block;
		font-size: 26upx;
		color: #bfbfbf;
		width: 390upx;
		white-space: nowrap;
		text-align: right;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.comment {
		background: #FFFFFF;
		margin: 30upx 20upx 0 20upx;
		padding: 32upx 24upx;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
		border-radius:12upx;
	}
	
	.comment-header {
		display: flex;
		flex-direction: row;
	}
	
	.comment-title {
		color: #4B4B4B;
		font-size: 28upx;
		flex: 1;
	}
	
	.comment-count {
		font-size: 24upx;
		padding: 2upx;
		color: #ABABAB;
		flex: 1;
		text-align: right;
	}
	
	.comment-item {
		padding: 30upx 12upx 30upx 22upx;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
		margin-top: 24upx;
		border-radius: 12upx;
	}
	
	.comment-user {
		display: flex;
		flex-direction: row;
	}
	
	.comment-avatar {
		width: 92upx;
		height: 92upx;
		border-radius: 50%;
	}
	
	.comment-userinfo {
		margin-left: 22upx;
		color: #4B4B4B;
		font-size: 28upx;
	}
	
	.comment-phone {
		font-size: 24upx;
		color: #8B8B8B;
	}
	
	.comment-stars {
		margin-left: 35upx;
		display: inline-block;
	}
	
	.comment-score {
		white-space: nowrap;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.comment-content {
		font-size: 24upx;
	}
	
	.comment-scores {
		font-size: 25upx;
		margin: 40upx 0;
	}
	
	.comment-image {
		margin-bottom: 10upx;
	}
	
	.comment-image {
		width: 160upx;
		height: 160upx;
		border-radius: 15upx;
		margin-right: 30upx;
	}
	
	.comment-time {
		color: #ABABAB;
		font-size: 24upx;
		margin-top: 10upx;
		text-align: right;
	}
	.bottom{
		width: 96%;
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: row;
		padding: 10upx 2%;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
		background: #FFFFFF;
		align-content: center;
		align-items: center;
		z-index:1000;
	}
	.bottom-btn{
		flex: 1;
		display: flex;
		flex-direction: column;
		align-content: center;
		align-items: center;
	}
	.bottom-icon{
		width: 38upx;
		height: 38upx;
		margin-top: 5upx;
		margin-bottom: 10upx;
	}
	.bottom-text{
		font-size: 22upx;
		color: #272727;
	}
	.buy-btn{
		width: 450upx;
		color: #ffffff;
		background:#478E7E;
		text-align: center;
		font-size: 26upx;
		border-radius: 10upx;
		padding:25upx 0;
		line-height: 1;
		margin: 0;
	}
	.cart-btn{
		width: 225upx;
		background: #45AA8C;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	.buy-btn-right{
		width: 225upx;
		background: #478E7E;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
	.buy-btn:after{
		border: none;
	}
	.detail{
		margin-top: 30upx;
		margin-bottom: 80upx;
		background: #FFFFFF;
	}
	.detail-image{
		width: 100%;
	}
	.share-btn{
		background: none;
		border:none;
		margin: 0;
		padding: 0;
		line-height: 1;
	}
	.share-btn:after{
		border:none;
	}
	.cart-button{
		position: fixed;
		bottom: 144upx;
		right: 0upx;
		height: 100upx;
		width: 100upx;
		background: #45AA8C;
		border-radius: 50upx;
		box-shadow:0px 7px 22px 0px rgba(51,176,139,0.58);
	}
	.cart-icon{
		width: 48upx;
		height: 40upx;
		margin-top: 30upx;
		margin-left: 26upx;
	}
	.cart-dot{
		position: absolute;
		top:-5upx;
		right: 0;
		background: #ffffff;
		border-radius: 20upx;
		font-size: 20upx;
		padding: 5upx 13upx;
		color: #FF7465;
		display: inline-block;
		border:1px solid #FF7465;
	}
</style>
